<template>
  <div class="smslogin">
    <div class="img">
      <img src="../../assets/images/logo.png" />
    </div>
    <div class="form">
      <form>
        <div class="form_item" :class="{active:active==1}">
          <input
            v-model="form.mobile"
            type="text"
            placeholder="请输入手机号"
            @blur="active=0"
            @focus="active=1"
          />
          <p v-if="flag" @click="sendCode" style="color:#eb6100;font-size:16px">获取验证码</p>
          <p v-else style="color:#ccc">获取验证码({{timer}})</p>
        </div>
        <div class="form_item" :class="{active:active1==1}">
          <input
            v-model="code"
            @blur="active1=0"
            @focus="active1=1"
            type="text"
            placeholder="请输入短信验证码"
          />
        </div>
      </form>
      <p>
        <span>*未注册得手机号将自动注册</span>
        <span>使用密码登录</span>
      </p>
      <button @click="login">登录</button>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { postsmsCode, loginCode } from "../../request/home";
import { Toast } from "vant";
import {useRouter} from 'vue-router'
export default {
  setup(props) {
    let {push} = useRouter()
    const data = reactive({
      timer: 60,
      flag: true,
      active: 0,
      active1: 0,
      form: {
        mobile: "",
        sms_type: "login"
      },
      code: "",
      type: 2,
      client: 1
    });
    const sendCode = () => {
      let reg = /^(?:(?:\+|00)86)?1\d{10}$/;

      if (!reg.test(data.form.mobile)) {
        Toast.fail("不是正确得手机号");
        return;
      }

      data.flag = false;
      postsmsCode(data.form).then(res => {
        console.log(res);
      });
      let time = setInterval(() => {
        if (data.timer > 0) {
          data.timer--;
        } else {
          data.timer = 60;
          data.flag = true;
          clearInterval(time);
        }
      }, 1000);
    };
    const login = () => {
      loginCode({
        mobile: data.form.mobile,
        sms_code: data.code,
        type: data.type,
        client: data.client
      }).then(res=>{
        console.log(res);
        if(res.data.code==200){
            push('/mine')
            localStorage.setItem('msmktoken',res.data.data.remember_token)
        }
      });
    };
    return { ...toRefs(data), sendCode, login };
  }
};
</script>
<style lang="scss" scoped>
.smslogin {
  width: 100%;
  margin-top: 80px;
  .img {
    width: 525px;
    margin: auto;
    margin-bottom: 50px;
    img {
      width: 525px;
      height: 115px;
    }
  }
  .form {
    width: 600px;
    margin: auto;
    font-size: 24px;
    .form_item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #f1f1f1;
      input {
        border: none;
      }
    }
    .active {
      border-bottom: 1px solid #eb6100;
    }
    p {
      display: flex;
      justify-content: space-between;
      color: #999;
      font-size: 18px;
      margin-bottom: 30px;
    }
    button {
      width: 100%;
      height: 60px;
      color: #fff;
      outline: none;
      border-radius: 40px;
      border: none;
      background-image: url("../../assets/theme-img/login-btn.png");
      background-size: 100% 100%;
    }
  }
}
</style>